<!-- @chenqin
<draw-enclosure v-if="map" :map="map" :validarea="validarea"></draw-enclosure>
-->
<template>
	<div>
		<map-damalu :mapId="'map-area'" :positionPicker="false" :lng="lng" :lat="lat" :mapHeight="mapHeight" scale="10" @mapOk="mapOk"></map-damalu>
		<div class="drawEnclosure">
	        <div class="button-group">
			     <!--<input type="button" class="btn btn_primary" value="撤销" @click="resetEditLine"/>&nbsp;-->
			    <input type="button" class="btn btn_primary" value="还原初始状态" @click="resetEditLine"/>&nbsp;
			    <input type="button" class="btn btn_primary" value="保存编辑" @click="closeEditLine"/>
			</div>
		</div>
	</div>
</template>
<script>
	import mapDamalu from './map-init'
	export default{
		components: {
			mapDamalu
		},
		data () {
			return {
				map: null,
				lng:'116.397428',
				lat:'39.90923',
				currentEditorPolygon: {},
				polygonList: [],
				resultPolygon: [],
				initPolygonObj: [],

			}
		},
		props: {
            polygonObj: {
            	type: Array,
            	default: () => {
                    let cityId = localStorage.getItem('cityId');
                    if (cityId == '1') {
                        return [{
                            validarea: [[116.333182,39.938755],[116.469138,39.938755],[116.469138,39.869225],[116.333182,39.869225]],
                            id: 0,
                        }]
                    } else if (cityId == '2') {
                        return [{
                            validarea: [[121.431772,31.251513],[121.486017,31.251513],[121.486017,31.233608],[121.431772,31.233608]],
                            id: 0
                        }]
                    } else if (cityId == '3') {
                        return [{
                            validarea: [[113.973201,22.557194],[114.018863,22.557194],[114.018863,22.539754],[113.973201,22.539754]],
                            id: 0
                        }]
                    } else if (cityId == '4') {
                        return [{
                            validarea: [[104.065708,30.657447],[104.085708,30.907447],[104.289908,30.907997]],
                            id: 0
                        }]
                    }
				}
            },

            mapHeight: {
	            type: Number | String
	        },
		},
		methods: {
			mapOk (map) {

				this.map = map;
			},
			getPonits (points) {
				let newsPoints = [];
				points.forEach(item => {
					let arr = [item.lng,item.lat];
					newsPoints.push(arr);
				});
                // console.info('获取到的店', newsPoints);
				return newsPoints;
			},
			resetEditLine () {
				let initPoints = null;
				if(this.currentEditorPolygon._polygon){
					this.initPolygonObj.forEach(item => {
						if(item.id === this.currentEditorPolygon._id){
							initPoints = item.validarea;
						}
					})
				}
				this.resultPolygon.forEach(item => {
	        		if(item.id === this.currentEditorPolygon._id){
	        			item.validarea = initPoints;
	        		}
	        	});
				this.map.clearMap();
	        	this.resultPolygon.forEach(item => {
	        		this.drawEnclosure(item);
	        	})
			},
			startEditLine () {
				if(this.currentEditorPolygon._polygon){
					this.currentEditorPolygon._polygonEditor.open();
				}
			},
			closeEditLine () {
				if(this.currentEditorPolygon._polygon){
					this.currentEditorPolygon._polygonEditor.close();
					this.$emit('resultPolygon',this.resultPolygon);
				}
			},
			//在地图上绘制围栏
	        drawEnclosure (item) {

	        	let _this = this;
			    let polygon = new AMap.Polygon({
		            map: this.map,
		            path: [...item.validarea],
			        strokeColor: item.strokeColor || "#FF33FF",
			        strokeWeight: item.strokeWeight || 3,
			        strokeOpacity: item.strokeOpacity || 1,
			        fillOpacity: item.fillOpacity || 0.4,
			        strokeStyle: item.strokeStyle || 'solid',
			        fillColor: item.fillColor || '#1791fc',
			        zIndex: 50,
			        extData: {id: item.id}
		        });

		        polygon.on('click',function(e){
		        	_this.closeEditLine();
		        	_this.currentEditorPolygon._polygon = e.target;
		        	_this.currentEditorPolygon._id = e.target.getExtData().id;
		        	_this.currentEditorPolygon._polygonEditor = new AMap.PolyEditor(_this.map, e.target);
		        	_this.startEditLine();
		        });

		        polygon.on('change',function(e){
		        	let lastPoints = _this.getPonits(_this.polygonList[0].getPath());
		        	_this.resultPolygon.forEach(item => {
		        		if(item.id === _this.currentEditorPolygon._id){
		        			item.validarea = lastPoints;
		        		}
		        	})
		        });
                this.$emit('resultPolygon',this.resultPolygon);
		        this.polygonList.push(polygon);

	        },
		},
		watch: {
			map(val){
				this.polygonObj.forEach(item => {
	        		this.drawEnclosure(item);
	        		// 缩放地图到合适的视野级别
			    	this.map.setFitView(this.polygonList);
	        	})
			},
			polygonObj(val){

				this.initPolygonObj = [].concat(JSON.parse(JSON.stringify(val)));
				this.resultPolygon = [].concat(JSON.parse(JSON.stringify(val)));
				this.map.clearMap();
				this.polygonList = [];
				this.polygonObj.forEach(item => {
	        		this.drawEnclosure(item);
	        		// 缩放地图到合适的视野级别
			    	this.map.setFitView(this.polygonList);
	        	})
			}
		},
		mounted (){
			this.initPolygonObj = this.polygonObj ;
			this.resultPolygon = this.polygonObj;
		}
	}
</script>
<style lang="less">
	@import url('./map.less');
</style>
